/* pages/profile/friendInfo/index.wxss */
.downPopupBox {
  width: 100%;
  max-height: 1180rpx;
  height: auto;
  background-color: #f6f5f7;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .applyHeadBox {
    width: 100%;
    height: auto;
    padding: 30rpx 35rpx 40rpx;
    box-sizing: border-box;
    background: #FFF0E6;
    display: flex;
    flex-direction: column;
    justify-content: flex-center;
    border-radius: 40rpx;


    .headTitle {
      overflow-wrap: break-word;
      color: rgba(255, 120, 40, 1.000000);
      font-size: 40rpx;
      font-family: PingFang SC-Semibold;
      font-weight: 600;
      text-align: left;
      white-space: nowrap;
      line-height: 56rpx;
      margin: 0 0 30rpx;
    }

    .paragraph_1 {
      width: 90%;
      overflow-wrap: break-word;
      color: rgba(49, 49, 49, 1.000000);
      font-size: 28rpx;
      font-family: PingFang SC-Regular;
      font-weight: normal;
      text-align: left;
      line-height: 44rpx;
    }
  }
  .updateIconBox {
    width: 120rpx;
    height: 120rpx;
  }
  .friendContainer {
    width: 100%;
    max-height: 700rpx;
    height: auto;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-bottom: 20rpx;
    margin: 0 auto;
    .sliderBox {
      width: 100%;
      height: auto;
      margin: 30rpx;
      .sliderEveryOne {
        width: 200rpx;
        height: 20rpx;
        background: #f8d8c4;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        margin-left: 20rpx;
      }
      .sliderSelect {
        width: 200rpx;
        height: 20rpx;
        background: #FF7828;
        animation: swiperSliderAnimation 0.5s alternate;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        margin-left: 20rpx;
      }
    }
  }
  .headBox {
    width: 100%;
    height: auto;
    padding: 30rpx;
    box-sizing: border-box;
    .nameText {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #313131;
      line-height: 48rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-left: 20rpx;
    }
    .statusDotBox {
      margin-left: 20rpx;
    }
  }
  .infoTitle {
    font-size: 40rpx;
    color: #ff7828;
    text-align: left;
    font-weight: 600;
    margin: 15rpx 0 0;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    color: #FF7828;
    line-height: 64rpx;
  }
  .contentBox {
    width: 92%;
    height: auto;
    background: #FFFFFF;
    margin: 20rpx auto;
    border-radius: 16rpx;
    padding: 30rpx;
    box-sizing: border-box;
  }
  .swiperBox {
    width: 90%;
    margin: 0 auto;
    .swiperContentBox{
      width: 100%;
      // height: 500rpx;
      height: 95vw;
      border-radius: 20rpx;
      overflow: hidden;
      border: 1px solid rgb(224, 224, 224);
    }
    .swiperImg {
      // width: 98%;
      width: 89vw;
      height: 93vw;
      margin: 0 auto;
      image {
        width: 675rpx;
        // height: 500rpx;
        height: 93vw;
        border-radius: 20rpx;
      }
    }
  }
  // 以下是个人详情模块
  .selfIntroductionBox {
    height: auto;
    .infoDes{
      font-size: 28rpx;
      color: #313131;
      font-family: PingFang SC, PingFang SC;
      text-transform: none;
      font-style: normal;
      font-weight: 400;
      line-height: 50rpx;
      text-align: left;
      text-indent: 30rpx;
      margin: 45rpx 0;
    }
  }
  .flexXStart {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .flexXSp {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .flexXCenter {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .friendFooter {
    width: 100%;
    height: auto;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    border-top: 1px solid #e9e9e9;
    background: #fff;
    .btnBox {
      margin: 20rpx 0;
    }
    // .h42{
    //   height: 84rpx;
    //   display: flex;
    //   align-items: center;
    //   justify-content: center;
    // }
  }
  .userHeadBox {
    width: 100%;
    background: #f6f6f6;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    margin: 45rpx auto;
  }
  .iconBox {
    width: 45rpx;
    height: 45rpx;
  }
  .yearBox {
    width: 33%;
    font-size: 28rpx;
    image {
      margin: 0 6rpx;
    }
  }
  .friendMiddleBox {
    width: 100%;
    height: auto;
    margin: 30rpx 0;
    .remarkText {
      margin-left: 20rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #313131;
      line-height: 44rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
  
  .select-bar {
    width: 100%;
    margin: 30rpx 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
	  justify-content: flex-start;

    .select-i {
      width: auto;
      height: 64rpx;
      background: #f6f6f6;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      font-family: PingFang SC-Regular;
      font-weight: 400;
      font-size: 24rpx;
      color: #313131;
      line-height: 64rpx;
      text-align: center;
      padding: 0 25rpx;
      box-sizing: border-box;
      margin: 10rpx;
    }
    .selected {
      background: #FFF0E6;
      color: #FF7828;
      border: none;
    }
  }
  .selectBarSkill {
    width: 100%;
    margin: 30rpx 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
	  justify-content: flex-start;
    column-gap: 20rpx;

    .select-i {
      width: calc((100% - 10px) / 3.5);
      min-width: calc((100% - 10px) / 3.5);
      max-width: calc((100% - 10px) / 3.5);
      flex: 1;
      height: 64rpx;
      background: #f6f6f6;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      font-family: PingFang SC-Regular;
      font-weight: 400;
      font-size: 24rpx;
      color: #313131;
      line-height: 64rpx;
      text-align: center;
      margin: 10rpx;
    }
    .selected {
      background: #FFF0E6;
      color: #FF7828;
      border: none;
    }
  }
  .skillImgBox {
    display: flex;
    align-items: center;
    image {
      width: 60rpx;
      height: 60rpx;
      padding: 10rpx 10rpx;
      box-sizing: border-box;
    }
  }
  .personalityBox {
    width: 100%;
    height: auto;
    .personalityTopBox {
      width: 100%;
      height: auto;
      text-align: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 40rpx;
      color: #88619A;
      line-height: 26rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      .mbitImg {
        width: 70rpx;
        height: 70rpx;
      }
    }
  }
  .personalityContent{
    width: 100%;
    height: auto;
    .personalityTitle {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 35rpx;
      color: #313131;
      line-height: 48rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin: 40rpx 0 25rpx;
    }
    .personalityRemark {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #313131;
      line-height: 44rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      text-indent: 25rpx;
    }
  }
  .headPicBox {
    width: 100%;
    .popopLogorleft, .popopLogorRight {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }
    .popopLogorRight {
      width: 120rpx;
      height: 120rpx;
    }
  }
}

/* 定义渐变动画 */
@keyframes swiperSliderAnimation {
  from {
      background-color: #f3d8c4;
  }
  to {
      background-color: #ff7828;
  }
}